<template>
  <div>
    <div style="height: 150px; background-color: #330000; border-radius: 5px">
      <div
        style="
          line-height: 150px;
          text-align: center;
          color: #ffff;
          font-size: 30px;
          font-weight: bold;
        "
      >
        全球疫情模块
      </div>
    </div>
    <div class="main">
      <div
        id="content"
        style="
          width: 60%;
          height: 800px;
          background-color: #bfefff;
          margin: 0;
          float: left;"></div>
      <div class="List">
        <el-table :data="tableData" style="width: 100%" height="800">
        <el-table-column fixed prop="date" label="数据日期" width="150">
        </el-table-column>
        <el-table-column prop="name" label="地区名称" width="120">
        </el-table-column>
        <el-table-column prop="continent" label="所属洲" width="120">
        </el-table-column>
        <el-table-column prop="confirm" label="累计确诊" width="120">
        </el-table-column>
        <el-table-column prop="dead" label="累计死亡" width="120">
        </el-table-column> 
        <el-table-column prop="heal" label="累计治愈" width="120">
        </el-table-column> 
        </el-table>
      </div>
        
      </div>




      
      </div>


</template>
<script>
import world from "../../assets/world1";
import echarts from "echarts";
import axios from "../../http/axios";
export default {
  data() {
    return {
      id: 0,
      bigdata: 0,
      dataList: 0,
      tableData:[],
    };
  },
  destroyed() {
    clearInterval(this.id);
  },
  created() {
    this.id = setInterval(() => {
      this.findJson();
    }, 1000);
    this.findData();
  },
  methods: {
    findData() {
      axios.defaults.baseURL = "http://localhost:9528";
      var that = this;
      axios.get("/api/g2/getOnsInfo?name=disease_foreign").then((res) => {
        var js = JSON.parse(res.data);
        this.bigdata = js.globalStatis;
      });
    },
    findJson() {
      axios.defaults.baseURL = "http://localhost:9528";
      var that = this;
      axios.get("/api/g2/getOnsInfo?name=disease_foreign").then((res) => {
        var js = JSON.parse(res.data);
        that.tableData = js.foreignList;
        let result = js.foreignList.map((item, index) => {
          return { value: item.confirm, name: item.name, item };
        });
        this.initeCharts(result);
      });
    },
    initeCharts(res) {
      var myChart = echarts.init(document.getElementById("content"));
      // var option代表定义一个名为option的变量，后面花括号里的代表我们需要作图的参数设置
      var option = {
        // 默认的颜色数组 （如果不明确设置每个数据项的颜色，则会采用默认的数组
        // 此处的颜色为十六进制表示，也可以使用rgb来表示。简单地理解就是一串字符就代表一个颜色，挑选喜欢的颜色可以自行搜索颜色
        color: ["#ac6767", "#1d953f", "#ff3333", "#6950a1", "#918597"],
        visualMap: {
          min: 0,
          max: 20,
          left: "left",
          top: "bottom",
          text: ["高", "低"], //取值范围的文字
          inRange: {
            color: [
              "#e0ffff",
              "#33ff99",
              "#ccff66",
              "#FFCCD6",
              "#ff9933",
              "red",
            ], //取值范围的颜色
          },
          show: true, //图注
        },

        series: [
          {
            // 图标类型为 地图
            type: "map",
            name: "test",
            label: {
              show: false,
              position: "top",
              margin: 2,
            },

            mapType: "world", // 地图类型为 世界地图
            // data里的每一个{}中，是一项数据整体，标明了该项数据的名称，值，以及颜色等参数。注意：此处的字符串需要加双引号""(输入法切换至英文状态)
            data: res,
            roam: false,
            zoom: 1,
            // 去除各个国家上的小红点
            showLegendSymbol: false,
          },
        ],
        // 鼠标悬浮，单击产生的效果（在网页上可以动态显示）
        tooltip: {
          show: true,
          trigger: "item",
          triggerOn: "mousemove|click",
          axisPointer: {
            type: "line",
          },
          textStyle: {
            fontSize: 14,
          },
          borderWidth: 0,
        },
      };
      // this.dataList1 = res1
      myChart.setOption(option);
      myChart.on("click", (params) => {});
    },
  },
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
.List {
  float: right;
  height: 800px;
  width: 40%;
  border: 1px solid black;
}
.ban ul li {
  height: 50%;
  width: 50%;
}
</style>
